<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
       html,body{
            width: 100%;
            height: 100%;
        }
        .center{
            height: 200px;
            width: 200px;
            /* margin: 0 auto; */
            position: absolute;
            top: 50%;
            left: 50%;
            /* margin-left: -100px; */
            /* margin-top: -100px; */
            transform: translate(-50%, -50%);
            background-color: red;
        }
        .center1{
            width: 200px;
            height: 200px;
            margin: 0 auto;
            background-color: red;
        }
        .center2{
            width: 200px;
            height: 200px;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
            background-color: red;
        }
        .center3{
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .center3 div{
            width: 200px;
            height: 200px;
            background-color: red;
        }
        .center4{
            display: table;
            margin: 0 auto;
            width: 200px;
            height: 200px;
            background-color: red;
        }

        .flex_wrap{
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .flex_center{
            height: 200px;
            width: 200px;
            background-color: red;
        }

        .container {
            min-height: 200px;
        }
        .column1,.column2 {
            width: 31.3%;
            background-color: green;
            float: left;
            min-height: 100px;
            /* margin: 0 1%; */
        }
        .column3 {
            /* 左边设置的浮动 右边会向左边塌方 */
            width: 31.3%;
            background-color: red;
            min-height: 100px;
            /* margin: 0 1%; */
        }
        .bfc {
            /* BFC的区域不会与float元素的区域重叠。 */
            /* 计算BFC的高度时，浮动元素也参与计算 */
            overflow: hidden;
        }

        .left {
            float: left;
            height: 20px;
            width: 100px;
            outline: red 1px solid;
        }

        .content {
            overflow: hidden;
            outline: green 1px solid;
            width: 250px;
        }

        .content div {
            outline: blue 1px solid;
            margin: 5px;
            height: 20px;
        }
        p:first-child {
            color: lime;
            background-color: black;
            padding: 5px;
        }
    </style>
</head>
<body>
    <!-- <div class="center1">水平居中1</div> -->
    <!-- <div class="center2">水平垂直居中2</div> -->
    <!-- <div class="center3"><div>水平垂直居中3</div></div> -->
    <!-- <div class="center4">水平居中4</div> -->

    <!-- <div class="center">水平竖直居中</div> -->
    <!-- <div class="flex_wrap">
        <div class="flex_center"></div>
    </div> -->
    <!-- <div class="container">
        <div class="column1">column 1</div>
        <div class="column2">column 2</div>
        <div class="column3 ">column 3</div>
    </div> -->
    <!-- <div>
        <div class="left"></div>
        <div class="content">
            <div>AAAAAAAAAAAAAAAAAA</div>
            <div>BBBBBBBBBBBBBBBBBB</div>
            <div>CCCCCCCCCCCCCCCCCC</div>
        </div>
    </div> -->
    <div>
        <p>This text is selected!</p>
        <p>This text isn't selected.</p>
      </div>
      
      <div>
        <h2>This text isn't selected: it's not a `p`.</h2>
        <p>This text isn't selected.</p>
      </div>
</body>
<script>
    setTimeout(()=>{console.log('a');})
    Promise.resolve().then(()=>{
        console.log('b');
    }).then(
        ()=>Promise.resolve('c').then((data)=>{
            setTimeout(()=>{console.log('d');})
            console.log('f');
            return data
        })
    ).then(data=>{
        console.log(data);
    })
    // b f c a d 
</script>
</html>